<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Deploy</title>
		<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
		<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
		<link rel="stylesheet" type="text/css" href="easyui/demo/demo.css">

		<link rel="stylesheet" type="text/css" href="mycss.css">

		<script type="text/javascript" src="easyui/jquery.min.js"></script>
		<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
	</head>

	<body>
		<div id="deploylayout">
			<p> hehe this is heall</p>
			<table id="tg" class="easyui-treegrid" title="TreeGrid ContextMenu" style="width:100%;height:600px" data-options="
				iconCls: 'icon-ok',
				rownumbers: true,
				animate: true,
				collapsible: true,
				fitColumns: true,
				url: 'json/treegrid_data1.json',
				method: 'get',
				idField: 'id',
				treeField: 'name',
				onContextMenu: onContextMenu
			">
				<thead>
					<tr>
						<th data-options="field:'name'">Task Name</th>
						<th data-options="field:'level',width:30">level</th>
						<th data-options="field:'hosts',width:120">hosts</th>
						<th data-options="field:'type',width:30">type</th>
						<th data-options="field:'content',width:120">content</th>
						<th data-options="field:'status',width:30">status</th>
					</tr>
				</thead>
			</table>
			<div id="mm" class="easyui-menu" style="width:120px;">
				<div onclick="append()" data-options="iconCls:'icon-add'">Append</div>
				<div onclick="removeIt()" data-options="iconCls:'icon-remove'">Remove</div>
				<div class="menu-sep"></div>
				<div onclick="collapse()">Collapse</div>
				<div onclick="expand()">Expand</div>
			</div>

			<div id="depmm" class="easyui-menu" style="width:120px;">
				<div onclick="depmmNew()" data-options="iconCls:'icon-add'">New Deployment</div>
				<div onclick="depmmEdit()" data-options="iconCls:'icon-add'">Edit Deployment</div>
				<div onclick="depmmDel()" data-options="iconCls:'icon-remove'">Delete Deployment</div>
				<div class="menu-sep"></div>
				<div onclick="collapse()">Collapse</div>
				<div onclick="expand()">Expand</div>
			</div>

			<div id="phamm" class="easyui-menu" style="width:120px;">
				<div onclick="phasemmInsert()" data-options="iconCls:'icon-add'">Insert Phase</div>
				<div onclick="phasemmEdit()" data-options="iconCls:'icon-add'">Edit Phase</div>
				<div onclick="phasemmDel()" data-options="iconCls:'icon-remove'">Delete Phase</div>
				<div onclick="phasemmDel()" data-options="iconCls:'icon-remove'">Move Up</div>
				<div onclick="phasemmDel()" data-options="iconCls:'icon-remove'">Move Down</div>
				<div class="menu-sep"></div>
				<div onclick="collapse()">Collapse</div>
				<div onclick="expand()">Expand</div>
			</div>

			<div id="cmdmm" class="easyui-menu" style="width:120px;">
				<div onclick="phasemmInsert()" data-options="iconCls:'icon-add'">Insert Command</div>
				<div onclick="phasemmEdit()" data-options="iconCls:'icon-add'">Edit Command</div>
				<div onclick="phasemmDel()" data-options="iconCls:'icon-remove'">Delete Command</div>
				<div onclick="phasemmDel()" data-options="iconCls:'icon-remove'">Move Up</div>
				<div onclick="phasemmDel()" data-options="iconCls:'icon-remove'">Move Down</div>
				<div class="menu-sep"></div>
				<div onclick="collapse()">Collapse</div>
				<div onclick="expand()">Expand</div>
			</div>

			<div id="depwin" title="Deployment" class="easyui-dialog" data-options="closed:true" style="width: 300px; height: 200px;">
				<div style="padding: 10px;">
					<p style="color: #0081C2;font-size: 12pt;">Add New Deployment</p>
					<form method="get">
						<table>
							<tr>
								<td>name:</td>
								<td><input type="text" name="name" /></td>
							</tr>
							<tr>
								<td>desc:</td>
								<td><input type="text" name="description" /></td>
							</tr>
							<tr>
								<td>
									<input type="hidden" name="depId" /> </td>
								<td>
									<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-save'" onclick="depmmSave()">save</a>
									<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" onclick="depmmCancel()">cancel</a>
								</td>
							</tr>
						</table>
					</form>
				</div>
			</div>

			<div id="phawin" title="Phase" class="easyui-dialog" data-options="closed:true" style="width: 400px; height: 300px;">
				<div style="padding: 10px;">
					<p style="color: #0081C2;font-size: 12pt;">Insert A New Phase</p>
					<form method="get">
						<table>
							<tr>
								<td>name:</td>
								<td><input type="text" name="name" /></td>
							</tr>
							<tr>
								<td>desc:</td>
								<td><input type="text" name="description" /></td>
							</tr>
							<tr>
								<td>hosts:</td>
								<td><input type="text" name="hosts" /></td>
							</tr>
							<tr>
								<td>ssh-username:</td>
								<td><input type="text" name="ssh_username" /></td>
							</tr>
							<tr>
								<td>ssh-password:</td>
								<td><input type="text" name="ssh_password" /></td>
							</tr>
							<tr>
								<td>
									<input type="hidden" name="phaId" /> </td>
								<td>
									<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-save'" onclick="phammSave()">save</a>
									<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" onclick="phammCancel()">cancel</a>
								</td>
							</tr>
						</table>
					</form>
				</div>
			</div>

			<script type="text/javascript">
				function formatProgress(value) {
					if (value) {
						var s = '<div style="width:100%;border:1px solid #ccc">' +
							'<div style="width:' + value + '%;background:#cc0000;color:#fff">' + value + '%' + '</div>'
						'</div>';
						return s;
					} else {
						return '';
					}
				}

				function onContextMenu(e, row) {
					if (row) {
						e.preventDefault();
						$(this).treegrid('select', row.id);
						if (row.level == 'DEP') {
							$('#depmm').menu('show', {
								left: e.pageX,
								top: e.pageY
							});
						} else if (row.level == 'PHA') {
							$('#phamm').menu('show', {
								left: e.pageX,
								top: e.pageY
							});
						} else if (row.level == 'CMD') {
							$('#cmdmm').menu('show', {
								left: e.pageX,
								top: e.pageY
							});
						}
						//						$('#mm').menu('show', {
						//							left: e.pageX,
						//							top: e.pageY
						//						});
					}
				}

				function depmmNew() {
					$depwin = $('#depwin').dialog('open');
					$depwin.find('p').html('Add New Deployment');
					$depform = $depwin.find('form');
					$depform.form({
						url: 'rest/dep/save'
					});
					$depform.form('clear');
				}

				function depmmEdit() {
					$depwin = $('#depwin').dialog('open');
					$depwin.find('p').html('Edit Deployment');
					$depform = $depwin.find('form');
					$depform.form({
						url: 'rest/dep/update'
					});
					var row = $('#tg').treegrid("getSelected");
					if (row) {
						$depform.find("input[name='depId']").val(row.id);
						$depform.find("input[name='name']").val(row.name);
						$depform.find("input[name='description']").val(row.description);
						var v = $depform.find("input[name='depId']").val();
						console.log(v);
					}
				};

				function depmmDel() {
					var row = $('#tg').treegrid("getSelected");
					if (row) {
						$.messager.confirm("Delete deployment", "Are you sure to delete this deployment", function(r) {
							if (r) {
								
								$.post('rest/dep/delete',{depId:row.id},function(result){
									if(result.code == 0 )
									{
										$.messager.alert("Delete","删除成功","info");
										$('#tg').treegrid("remove", row.id);
									}else{
										$.messager.alert("Delete","删除失败","error");
									}
								})
								console.log('delete ' + row.id + row.description);
							} else {
								console.log('not delete' + row.id + row.description);
							}
						})
					}
				}

				function depmmSave() {
					$depwin = $('#depwin');
					$depform = $depwin.find('form');
					$depwin.window('close');
					$depform.form('submit', {
						onSubmit: function() {
						},
						success: function(data) {
							rsp = JSON.parse(data);
							if (rsp.code == 0) {
								$.messager.alert("Save", "保存成功", "info");
							} else {
								$.messager.alert("Save", "保存失败", "error");
							}
						},
						error: function() {
							$.messager.alert("save", "服务器错误", "error");
						}
					})
				}

				function depmmCancel() {
					$depwin = $('#depwin');
					$depform = $depwin.find('form');
					$depform.form("clear");
					$depwin.window("close");
				}

				function phasemmInsert() {
					$phawin = $('#phawin').dialog('open');
					$phawin.find('p').html('Insert A New Phase');
					$phaform = $phawin.find('form');
					$phaform.form('clear');
					$phaform.form({
						url:'rest/pha/add'
					});
					var row = $('#tg').treegrid("getSelected");
					if (row) {
						$phaform.find("input[name='phaId']").val(row.id);
					}
				}

				function phasemmEdit() {
					$phawin = $('#phawin').dialog('open');
					$phawin.find('p').html('Insert A New Phase');
					$phaform = $phawin.find('form');
					var row = $('#tg').treegrid("getSelected");
					if (row) {
						$phaform.find("input[name='phaId']").val(row.id);
						$phaform.find("input[name='name']").val(row.name);
						$phaform.find("input[name='description']").val(row.description);
						$phaform.find("input[name='hosts']").val(row.hosts);
						var v = $depform.find("input[name='depId']").val();
						console.log(v);
					}
				}
				
				function phammSave()
				{
					$phawin = $('#phawin');
					$phaform = $phawin.find('form');
					$phawin.window('close');
					$phaform.form('submit',{
						onSubmit:function(){
							
						},
						success:function(data){
							rsp = JSON.parse(data);
							if (rsp.code == 0) {
								$.messager.alert("Save", "保存成功", "info");
							} else {
								$.messager.alert("Save", "保存失败", "error");
							}
						},
						error: function() {
							$.messager.alert("save", "服务器错误", "error");
						}
					})
					
				}
				
				
				var idIndex = 100;

				function append() {
					idIndex++;
					var d1 = new Date();
					var d2 = new Date();
					d2.setMonth(d2.getMonth() + 1);
					var node = $('#tg').treegrid('getSelected');
					$('#tg').treegrid('append', {
						parent: node.id,
						data: [{
							id: idIndex,
							name: 'New Task' + idIndex,
							persons: parseInt(Math.random() * 10),
							begin: $.fn.datebox.defaults.formatter(d1),
							end: $.fn.datebox.defaults.formatter(d2),
							progress: parseInt(Math.random() * 100)
						}]
					})
				}

				function removeIt() {
					var node = $('#tg').treegrid('getSelected');
					if (node) {
						$('#tg').treegrid('remove', node.id);
					}
				}

				function collapse() {
					var node = $('#tg').treegrid('getSelected');
					if (node) {
						$('#tg').treegrid('collapse', node.id);
					}
				}

				function expand() {
					var node = $('#tg').treegrid('getSelected');
					if (node) {
						$('#tg').treegrid('expand', node.id);
					}
				}
			</script>

		</div>
	</body>

</html>